<template>
	<audio style="display: none" ref="audio" :src="notifyUrl" controls @ended="onAudioEnded" />
</template>
<script>
export default {
	name: "chat-deposit-notify",
	data() {
		return {
			isEnded: false,
			notifyUrls: [],
			notifyUrl: "",
			timer: null
		};
	},
	sockets: {
		// 定金
		new_deposit(data) {
			console.log("定金", data);
			this.play(data.fileName);
		}
	},
	created() {
		window.$depositNotify = this;
		this.$once("hook:beforeDestroy", () => {
			clearTimeout(this.timer);
		});
	},
	methods: {
		play(url) {
			clearTimeout(this.timer);
			if (url) {
				this.notifyUrls.push(url);
			}
			if (!this.notifyUrls.length) return;
			if (this.isEnded) return;
			this.isEnded = true;
			this.notifyUrl = this.notifyUrls.shift();
			this.$nextTick(() => {
				this.$refs.audio.play();
			});
			console.log("play", this.notifyUrl);
		},
		// 播放结束
		onAudioEnded(e) {
			this.isEnded = false;
			this.notifyUrl = "";
			this.timer = setTimeout(() => {
				this.play();
			}, 3000);
			console.log("onAudioEnded");
		}
	}
};
</script>
